<template>
  <div class="page">
   <div class="footer" id="footer">
        <router-link class="box" :to="{ name: 'today'}">
         今日
        </router-link>
        <router-link class="box" :to="{ name: 'course'}">
        课程
        </router-link>
        <a class="box" href='https://weidian.com/item.html?itemID=2138901356&wfr=wx&share_id=null&code=061KtNTb1GjoJr0ptrWb18X8Ub1KtNTH&state=H5WXshare'>
        商城
        </a>
         <!--<router-link class="box" :to="{ name: 'mall'}">
        商城
        </router-link>-->
        <router-link class="box" :to="{ name: 'user'}">
        我
        </router-link>
   </div>
  </div>
</template>
<script>
    import {
        getToday,
    } from "../tools.js"
    export default {
        data() {
            return {
                today: {
                    year: getToday(new Date()).year,
                    month: getToday(new Date()).month,
                    day: getToday(new Date()).day,
                }
            }
        }
    }
</script>
<style scoped>
    .page .footer {
        width: 100%;
        height: 50px;
        background: #222222;
        position: fixed;
        bottom: 0;
        left: auto;
        z-index: 999;
    }
    
    .page .footer .router-link-active {
        color: #fdb803!important;
    }
    
    .page .footer .router-link-active:nth-child(1):before {
        background-position: -4px -1px!important;
    }
    
    .page .footer .router-link-active:nth-child(2):before {
        background-position: -24px -1px!important;
    }
    
    .page .footer .router-link-active:nth-child(3):before {
        background-position: -43px -1px!important;
    }
    
    .page .footer .router-link-active:nth-child(4):before {
        background-position: -62px -1px!important;
    }
    
    .page .footer .box {
        width: 25%;
        height: 100%;
        float: left;
        box-sizing: border-box;
        color: #888;
        font: 400 12px/50px "microsoft yahei";
        text-align: center;
        text-decoration: none;
        position: relative;
        padding-top: 15px;
    }
    
    .page .footer .box:nth-child(2) {
        text-indent: -0.6%;
    }
    
    .page .footer .box:before {
        display: block;
        content: "";
        width: 18px;
        height: 18px;
        z-index: 9999;
        position: absolute;
        top: 10px;
        left: 40%;
        background: url(http://wechat-static.shapejoy.com//assets/img/footerbg.png) no-repeat;
        background-size: 85px 40px;
    }
    
    .page .footer .box:nth-child(1):before {
        background-position: -3px -21px;
    }
    
    .page .footer .box:nth-child(2):before {
        background-position: -23px -21px;
    }
    
    .page .footer .box:nth-child(3):before {
        background-position: -42px -21px;
    }
    
    .page .footer .box:nth-child(4):before {
        background-position: -61px -21px;
    }
</style>